<template>
    <div class="productAddWrap">
        <div class="title" @click="show1 = !show1">编辑产品</div>
        <ul class="itemWrap">
          <li @click="active=1" :class="active==1?'active':''">产品基本信息</li>
          <li @click="active=2" :class="active==2?'active':''">功能参数</li>
        </ul>
        <transition name="el-zoom-in-center">
          <div id="baseInfo" v-show="active==1">
            <el-form ref="form" :model="form" label-width="109px">
              <div class="mywidth">
              <el-form-item label="产品品类">
                <el-input v-model="form.short_name" disabled></el-input>
              </el-form-item>
              <el-form-item label="接入方式">
                <el-input v-model="form.model_name" disabled></el-input>
              </el-form-item>
              <el-form-item label="设备识别类型">
                <el-input v-model="form.type" disabled></el-input>
              </el-form-item>
              <el-form-item label="pincode">
                <el-input v-model="form.pin_code" disabled></el-input>
              </el-form-item>
              <el-form-item label="pinkey">
                <el-input v-model="form.pin_key" disabled></el-input>
              </el-form-item>
              <el-form-item label="配网方式">
                  <el-input v-model="form.network_type" disabled></el-input>
              </el-form-item>
              <el-form-item label="产品名称">
                  <el-input v-model="form.name" disabled></el-input>
              </el-form-item>
              <el-form-item label="产品型号">
                  <el-input v-model="form.model" disabled></el-input>
              </el-form-item>
              <el-form-item label="品牌">
                  <el-input v-model="form.brand_name" disabled></el-input>
              </el-form-item>
              <el-form-item label="产品介绍">
                  <el-input type="textarea" v-model="send.remarks"></el-input>
              </el-form-item>
              <el-form-item label="产品图片">
                <img :src="form.img"  class="logoImg" alt="">
              </el-form-item>
              <div class="onSubmit">
                <el-form-item>
                  <el-button type="primary" @click="addProduct" icon="el-icon-upload">保存</el-button>
                </el-form-item>
              </div>
              </div>
            </el-form>
          </div>
        </transition>
        <transition name="el-zoom-in-center">
          <div id="params" v-show="active==2">
            
              <table class="hovertable">
              <tr>
                <th>参数名称</th><th>标准参数名称</th><th>私有参数名称</th><th>标准value</th><th>私有value</th><th>显示类型</th><th>是否可控</th><th>是否开启</th><th>操作</th>
              </tr>
              <tr onmouseover="this.style.backgroundColor='rgb(236,236,236)';" onmouseout="this.style.backgroundColor='#fff';" v-for="(item,index) in form.parm">
                <td>{{item.parm}}</td><td>{{item.normal_name}}</td><td>{{item.private_value}}</td><td>{{item.normal_value}}</td>
                <td>{{item.private_value}}</td><td>{{item.display_type}}</td><td>{{item.is_controlled}}</td><td>{{item.is_open}}</td><td><el-button size="mini" @click="editParms(index)" icon="el-icon-edit">编辑</el-button></td>
              </tr>
              </table>
          </div>
        </transition>
        <router-link  to="/open/product"><button class="new"><i class="el-icon-back"></i>返回</button></router-link>
    </div>
</template>

<script>
  import $ from 'jquery'
  import _ from 'underscore'
  export default {
     mounted(){
            window.preview=()=>{
                var img = new Image();
                var file=$('#sendImage')[0].files[0]
                var reader=new FileReader()
                reader.onloadend=(e)=>{
                    var data = e.target.result;
                    img.src=data
                }
                reader.readAsDataURL(file)
                img.onload = ()=> {
                    var w = Math.min(400, img.width);
                    var h = img.height * (w / img.width);
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');

                    // 设置 canvas 的宽度和高度
                    canvas.width = w;
                    canvas.height = h;

                    // 把图片绘制到 canvas 中
                    ctx.drawImage(img, 0, 0, w, h);
                    // 取出 base64 格式数据
                    this.send.img = canvas.toDataURL(file.type);
                    $('.logoImg').attr('src',this.send.img)
                }
            }
        },
    data() {
      return {
        form: {
          name:'',
          model_name:'',
          model:'',
          short_type:'',
          type:'',
          network_type:'',
          brand_name:'',
          pin_code:'',
          pin_key:'',
          short_name:'',
          img:'',
          parm:[{
            parm:"参数名称",
            normal_name:"标准名称",
            normal_value:"标准value",
            private_name:"",
            private_value:"",
            is_controlled:"是否可控(0->不可控/1->可控)",
            is_open:"参数是否开启",
            display_type:"显示类型(枚举/数字/字符串.)"
          }]
        },
        active:1,
        send:{
          remarks:'请添加描述',
          img:''
        },
        pid:0,
        productTypeList:[//产品类型
        ],
        accesTypeList:[//接入类型
        ],
        sub_model:[true,true,true],//接入子类型
        networkList:[//配网方式
        ],
        identificationTypeList:[//设备识别类型
        ],
        brandList:[],
        index:''
      }
    },
    activated(){
       $('.el-button--primary')[0].setAttribute("style","background-color: rgb(58, 19, 90) !important;border-color: rgb(58, 19, 90) !important")
      this.pid=this.$route.params.pid
      this.getEditInfo()
    },
    methods: {
      addProduct() {
          const loading = this.$loading({
            lock: true,
            text: '编辑介绍中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          var hasEmpty=false
          var data=this.send
          data.id=this.pid
          data.token=localStorage.getItem('token')
          if(data.remarks=='请添加描述'){
            this.$message.error({message:'请添加描述',duration:1000});
            return
          }
          this.$http.post(this.$store.getters.serverIp+'edit_product_info',data).then((response)=>{
            loading.close()
            if(response.data.success){
              this.$message.success({message:response.data.info,duration:1000});
            }else{
              this.$message.error({message:response.data.info,duration:1000});
            }
          }).catch(()=>{

          })
      },
      getEditInfo(){
       var data={token:localStorage.getItem('token'),id:this.pid}
       this.$http.post(this.$store.getters.serverIp+'get_one_product_info',data).then((response)=>{
          if(response.data.success){
            var data=response.data.data
            data.model_name=response.data.data.model_name+'-'+response.data.data.acess_name
            data.img=this.$store.getters.serverStaticIp+data.img
            this.form=data
            this.send.remarks=response.data.data.remarks
          }
        }).catch((response)=>{

        })
      },
      editParms(index){
         this.index=index
         this.$alert(`<div class="myAlert"><span>私有参数名称：</span><div><input class="mybutton" id="private_name" type="text"/></div></div>
          <div class="myAlert"><span>私有参数value：</span><div><input class="mybutton" id="private_value"/></div></div>
          <div class="myAlert"><span>是否开启参数：</span><div><select class="mybutton" id="is_open"/>
                                                <option value="0">不开启</option>
                                                <option value="1">开启</option>
                                              </select></div>
                        `, {
                      dangerouslyUseHTMLString: true,
                      callback:this.editParmsServer,
                      title:'编辑参数'
              });
         setTimeout(()=>{
          console.log(this.form.parm[this.index],this.index)
          $('#private_name').val(this.form.parm[this.index].private_name)
          $('#private_value').val(this.form.parm[this.index].private_value)
          $('#is_open').val(this.form.parm[this.index].is_open)
          $('.el-button--primary')[1].setAttribute("style","background-color: rgb(58, 19, 90) !important;border-color: rgb(58, 19, 90) !important")
          $('.el-message-box')[0].setAttribute("style","width: 270px !important;")
         },100)
      },
      editParmsServer(action){
        if(action=="confirm"){
          var data={token:localStorage.getItem('token'),id:this.form.parm[this.index].id,is_open:Number($('#is_open').val()),private_name:$('#private_name').val(),private_value:$('#private_value').val()}
          console.log(data,this.index)
          const loading = this.$loading({
            lock: true,
            text: '编辑参数中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          this.$http.post(this.$store.getters.serverIp+'edit_one_product_parm',data).then((response)=>{
              loading.close()
             if(response.data.success){
                this.getEditInfo()
                this.$message.success({message:response.data.info,duration:1000});
              }else{
                this.$message.error({message:response.data.info,duration:1000});
              }
          }).catch((response)=>{

          })
        }
      }
    }
  }
</script>

<style lang="less">
    .productAddWrap{
      .mywidth{
        .el-input__inner{
          width: 52%;
        }
      }
      .el-table{
            margin: 0 auto !important;
            .is-leaf {
                border-bottom: 1px solid #c2cbe2 !important;
                text-align: center;
            }
            .cell{
                text-align: center !important;
            }
        }
        .el-table__header-wrapper{
        font-size: 20px !important;
        }
        tr.el-table__row {
            font-size: 15px;
        }
      .itemWrap{
        height: 23px;
        font-size: 11px;
        line-height: 25px;
        padding: 6px;
        li{
          float: left;
          letter-spacing: 2px;
          border: 1px solid;
          margin-right: 7px;
          background: #505b66;
          color: #fff;
          list-style-type: none;
          padding: 1px 8px;
          box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.2);        
          &:hover{
            cursor:pointer;
          }
        }
        .active{
          background: #441a61;
        }
      }
      #params{
        position: absolute;
        width: 100%;
        top: 93px;
        padding: 2%;
        box-sizing:border-box;
            padding-top: 0;
      }
      .el-textarea__inner{
        width:50%;
      }
      .logoImg{
            margin-top: 19px;
            max-width:120px;
        }
        .input-group{
            display: inline-block;
            border-collapse: separate;
            position: absolute;
            top: 109px;
            left: 174px;
            .input-group-addon {
                padding: 4px 5px;
                font-size: 14px;
                font-weight: 400;
                line-height: 1;
                color: #555;
                text-align: center;
                background-color: #c0c0c0;
                border-radius: 4px;
                label {
                    display: inline-block;
                    max-width: 100%;
                    margin-bottom: 5px;
                    font-weight: 700;
                    img {
                        vertical-align: middle;
                        cursor: pointer;
                    }
                    input{
                        display: none;
                    }
                }
            }
        }
      .el-tabs.el-tabs--card.el-tabs--top{
          width: 100% !important;
          position:relative;
          display: inline-block !important;
      }
      .el-form{
        width: 78%;
        margin: 0 auto;
        margin-top: 25px;
      }
       .onSubmit{
          position: relative;
          .addBrand{
            position: absolute;
    top: -24px;
    right: 20px;
    color: #3a8ee6;
          }
            .el-form-item--small{
                border-top: 1px solid #ccc !important;
                text-align: center !important;
                width: 100% !important;
                margin-top: 60px !important;
            }
            .el-form-item__content{
                margin: 0 !important;
            }
            .el-button--primary{
                margin-top: 10px !important;
            }
        }
    }
    .title{
        font-size: 24px;
        font-weight: normal;
        border-bottom: 1px solid #ccc;
        color: #324157;
        text-indent: 17px;
        padding: 9px;
    }
    .content{
        padding:5px;
        >button{
            position: absolute;
            top: 60px;
            right: 34px;
            background: #717fa9;
            color: #fff;
            border: 1px solid #393737;
            border-radius: 5px;
            padding: 4px;
        }
        >button:hover{
            cursor:pointer;
            outline:none
        }
        .pageination{
            text-align: center;
            margin: 23px;
        }
    }
   
</style>

